import React from "react";
import { Icon } from "antd-mobile";
import classnames from "classnames";
import "./index.scss";

const statusMap = {
	"06": {
		text: "已结清",
		isTip: false
	},
	10: {
		text: "已逾期",
		isTip: true,
		isRed: true
	},
	"01": {
		text: "待审批",
		isTip: false
	},
	"03": {
		text: "待放款",
		isTip: false
	},
	"04": {
		text: "借款中",
		isTip: true
	},
	"07": {
		text: "还款中",
		isTip: true
	},
	"09": {
		text: "待还款",
		isTip: true
	},
	"02": {
		text: "审批拒绝",
		isTip: false
	},
	"05": {
		text: "放款失败",
		isTip: false
	}
};
const getDays = (status, days) => {
	if (status === "10") {
		return `逾期${days} 天`;
	}
	return `还剩${days} 天`;
};
const loanItem = props => {
	const {
		loanData = { loanStatus: "09" },

		onClick
	} = props;
	const statusItem = statusMap[loanData.loanStatus] || {};
	const classNames = classnames("tip", {
		red: statusItem.isRed,
		green: !statusItem.isRed
	});
	return (
		<div className="loan-and-pay-detail-loan-item" onClick={onClick}>
			<div className="loan-and-pay-item-left">
				<div className="loan-and-pay-item-left-money">
					借款金额：{loanData.loanAmt}元
					{statusItem.isTip && (
						<div className={classNames}>
							{getDays(loanData.loanStatus, loanData.repayDays)}
						</div>
					)}
				</div>
				<div className="loan-and-pay-item-left-time">
					借款时间：{loanData.loanDate}
				</div>
			</div>
			<div className="loan-and-pay-item-right">
				<span>{statusItem.text}</span>
				<Icon type="right" className="icon-grey" />
			</div>
		</div>
	);
};
export default loanItem;
